<template>
  <view class="container">
    <!-- 用户信息头部 -->
    <view class="profile-header">
      <image class="header-bg" src="/static/profile-bg.jpg" mode="aspectFill"></image>
      <view class="user-info">
        <view class="avatar-section">
          <image class="user-avatar" :src="userInfo.avatar" mode="aspectFill" @tap="previewAvatar"></image>
          <view class="user-basic">
            <text class="user-name">{{ userInfo.name }}</text>
            <text class="user-school">{{ userInfo.school }}</text>
          </view>
        </view>
        <view class="edit-btn" @tap="editProfile">
          <text class="edit-text">编辑</text>
        </view>
      </view>
      
      <!-- 统计数据 -->
      <view class="stats-section">
        <view class="stat-item" @tap="viewMyPosts">
          <text class="stat-number">{{ userStats.posts }}</text>
          <text class="stat-label">帖子</text>
        </view>
        <view class="stat-item" @tap="viewFollowing">
          <text class="stat-number">{{ userStats.following }}</text>
          <text class="stat-label">关注</text>
        </view>
        <view class="stat-item" @tap="viewFollowers">
          <text class="stat-number">{{ userStats.followers }}</text>
          <text class="stat-label">粉丝</text>
        </view>
        <view class="stat-item" @tap="viewLikes">
          <text class="stat-number">{{ userStats.likes }}</text>
          <text class="stat-label">获赞</text>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <scroll-view scroll-y="true" class="menu-scroll">
      <view class="menu-section">
        <text class="section-title">个人中心</text>
        <view class="menu-list">
          <view 
            v-for="(item, index) in personalMenus" 
            :key="index"
            class="menu-item" 
            @tap="handleMenuTap(item)"
          >
            <view class="menu-left">
              <image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
              <text class="menu-text">{{ item.title }}</text>
            </view>
            <view class="menu-right">
              <text v-if="item.badge" class="menu-badge">{{ item.badge }}</text>
              <image class="menu-arrow" src="/static/home/right.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>

      <view class="menu-section">
        <text class="section-title">应用设置</text>
        <view class="menu-list">
          <view 
            v-for="(item, index) in settingsMenus" 
            :key="index"
            class="menu-item" 
            @tap="handleMenuTap(item)"
          >
            <view class="menu-left">
              <image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
              <text class="menu-text">{{ item.title }}</text>
            </view>
            <view class="menu-right">
              <image class="menu-arrow" src="/static/home/right.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>

      <view class="menu-section">
        <text class="section-title">其他</text>
        <view class="menu-list">
          <view 
            v-for="(item, index) in otherMenus" 
            :key="index"
            class="menu-item" 
            @tap="handleMenuTap(item)"
          >
            <view class="menu-left">
              <image class="menu-icon" :src="item.icon" mode="aspectFit"></image>
              <text class="menu-text">{{ item.title }}</text>
            </view>
            <view class="menu-right">
              <image class="menu-arrow" src="/static/home/right.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>

      <!-- 退出登录 -->
      <view class="logout-section">
        <view class="logout-btn" @tap="logout">
          <text class="logout-text">退出登录</text>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航 -->
    <BottomNav current-page="profile" />
  </view>
</template>

<script>
import BottomNav from '../../components/BottomNav.vue'

export default {
  components: {
    BottomNav
  },
  data() {
    return {
      userInfo: {
        name: '张雨',
        school: 'University of Waterloo',
        avatar: '/static/home/av.png',
        bio: '热爱生活，热爱学习'
      },
      userStats: {
        posts: 24,
        following: 156,
        followers: 89,
        likes: 324
      },
      personalMenus: [
        {
          title: '我的收藏',
          icon: '/static/home/collect.png',
          action: 'myCollections'
        },
        {
          title: '我的关注',
          icon: '/static/home/follow.png',
          action: 'myFollowing'
        },
        {
          title: '浏览记录',
          icon: '/static/home/history.png',
          action: 'browseHistory'
        },
        {
          title: '消息通知',
          icon: '/static/home/notification.png',
          action: 'notifications',
          badge: '3'
        }
      ],
      settingsMenus: [
        {
          title: '隐私设置',
          icon: '/static/home/privacy.png',
          action: 'privacySettings'
        },
        {
          title: '通用设置',
          icon: '/static/home/settings.png',
          action: 'generalSettings'
        },
        {
          title: '主题模式',
          icon: '/static/home/theme.png',
          action: 'themeSettings'
        }
      ],
      otherMenus: [
        {
          title: '帮助与反馈',
          icon: '/static/home/help.png',
          action: 'helpAndFeedback'
        },
        {
          title: '关于我们',
          icon: '/static/home/about.png',
          action: 'aboutUs'
        }
      ]
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '我的'
    });
  },
  methods: {
    editProfile() {
      console.log('编辑个人资料');
      uni.navigateTo({
        url: '/pages/edit-profile/edit-profile'
      });
    },
    previewAvatar() {
      uni.previewImage({
        urls: [this.userInfo.avatar]
      });
    },
    viewMyPosts() {
      console.log('查看我的帖子');
      uni.navigateTo({
        url: '/pages/my-posts/my-posts'
      });
    },
    viewFollowing() {
      console.log('查看关注列表');
      uni.navigateTo({
        url: '/pages/follow-list/follow-list?type=following'
      });
    },
    viewFollowers() {
      console.log('查看粉丝列表');
      uni.navigateTo({
        url: '/pages/follow-list/follow-list?type=followers'
      });
    },
    viewLikes() {
      console.log('查看获赞');
      uni.navigateTo({
        url: '/pages/my-likes/my-likes'
      });
    },
    handleMenuTap(item) {
      console.log('点击菜单:', item.title);
      
      switch (item.action) {
        case 'myCollections':
          uni.navigateTo({
            url: '/pages/my-collections/my-collections'
          });
          break;
        case 'myFollowing':
          uni.navigateTo({
            url: '/pages/follow-list/follow-list?type=following'
          });
          break;
        case 'browseHistory':
          uni.navigateTo({
            url: '/pages/browse-history/browse-history'
          });
          break;
        case 'notifications':
          uni.navigateTo({
            url: '/pages/notifications/notifications'
          });
          break;
        case 'privacySettings':
          uni.navigateTo({
            url: '/pages/privacy-settings/privacy-settings'
          });
          break;
        case 'generalSettings':
          uni.navigateTo({
            url: '/pages/general-settings/general-settings'
          });
          break;
        case 'themeSettings':
          uni.navigateTo({
            url: '/pages/theme-settings/theme-settings'
          });
          break;
        case 'helpAndFeedback':
          uni.navigateTo({
            url: '/pages/help-feedback/help-feedback'
          });
          break;
        case 'aboutUs':
          uni.navigateTo({
            url: '/pages/about-us/about-us'
          });
          break;
        default:
          uni.showToast({
            title: '功能开发中',
            icon: 'none'
          });
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除用户信息
            console.log('用户确认退出登录');
            
            // 跳转到登录页面
            uni.reLaunch({
              url: '/pages/login/login'
            });
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 120rpx;
}

/* 用户信息头部 */
.profile-header {
  position: relative;
  background: #fff;
  margin-bottom: 20rpx;
}

.header-bg {
  width: 100%;
  height: 200rpx;
  opacity: 0.8;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 30rpx;
  margin-top: -50rpx;
  position: relative;
  z-index: 2;
}

.avatar-section {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 6rpx solid #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.user-basic {
  margin-left: 24rpx;
  margin-top: 20rpx;
}

.user-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.user-school {
  font-size: 24rpx;
  color: #666;
}

.edit-btn {
  padding: 12rpx 24rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  margin-top: 20rpx;
}

.edit-text {
  font-size: 24rpx;
  color: #333;
}

/* 统计数据 */
.stats-section {
  display: flex;
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.stat-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

/* 功能菜单 */
.menu-scroll {
  height: calc(100vh - 480rpx);
}

.menu-section {
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
  margin: 0 30rpx 20rpx;
  overflow: hidden;
}

.section-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  padding: 30rpx 30rpx 20rpx;
  display: block;
}

.menu-list {
  border-top: 1rpx solid #f0f0f0;
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-left {
  display: flex;
  align-items: center;
}

.menu-icon {
  width: 48rpx;
  height: 48rpx;
  margin-right: 24rpx;
}

.menu-text {
  font-size: 28rpx;
  color: #333;
}

.menu-right {
  display: flex;
  align-items: center;
}

.menu-badge {
  background: #ff4444;
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 8rpx;
  border-radius: 10rpx;
  margin-right: 12rpx;
  min-width: 32rpx;
  text-align: center;
}

.menu-arrow {
  width: 24rpx;
  height: 24rpx;
  opacity: 0.6;
}

/* 退出登录 */
.logout-section {
  padding: 40rpx 30rpx;
}

.logout-btn {
  background: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  text-align: center;
  border: 2rpx solid #ff4444;
}

.logout-text {
  font-size: 28rpx;
  color: #ff4444;
  font-weight: 600;
}
</style>
